<template>
  <div class="index">
    <div class="topRoom">
      <div class="top">
        <div class="search" @click="$router.push('search')">
          <div class="iconbox">
            <van-icon name="search" />
          </div>
          <span>搜索</span>
        </div>
      </div>
      <transition name="ani1">
        <div class="nav" v-if="isShowNav" ref="navbar">
          <span
            v-for="(item, index) in MyChannels"
            :key="item.id"
            :class="{ active: activeChannel === index }"
            @click="changeChannel(index)"
            >{{ item.name }}</span
          >
          <span class="latsItem" v-if="MyChannels.length > 3"></span>
          <div class="menu">
            <van-icon name="wap-nav" color="#3296fa" @click="showNavMenufn" />
          </div>
        </div>
      </transition>
    </div>
    <div class="articleRoom" ref="pronbit">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <articleBox
            v-for="(item, index) in articleArr"
            :key="index"
            :item="item"
            @Blacklists="Blacklists"
          ></articleBox>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup position="bottom" v-model="showNavMenu">
      <div class="NavMenu">
        <van-cell-group>
          <van-cell title="我的频道" />
        </van-cell-group>
        <van-tag
          type="primary"
          size="large"
          closeable
          @close="delChannels(index)"
          v-for="(item, index) in MyChannels"
          :key="item.id"
        >
          <template>
            <div @click="changeChannel(index)">
              {{ item.name }}
            </div>
          </template>
        </van-tag>
        <van-cell-group>
          <van-cell title="频道推荐" />
        </van-cell-group>
        <van-tag
          type="primary"
          size="large"
          v-for="item in recommendChannels"
          :key="item.id"
          @click="addChannels(item)"
          >{{ item.name }}</van-tag
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getChannelsApi,
  getUserChannelsApi,
  getArticlesApi,
  resetUserChannelsApi
} from '../../../api/homeindex'
import articleBox from './article.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'index',
  components: {
    articleBox
  },
  data () {
    return {
      showNavMenu: false, // 是否展示tag菜单
      loading: false, // 列表是否在加载
      finished: false, // 列表是否加载完毕
      ChannelsArr: [], // 全部频道数组
      MyChannels: [], // 用户的频道数组
      resetUserChannels: [], // 重新提交的频道数组
      activeChannel: 0, // 激活的tag
      articleArr: [], // 当前文章列表
      articleTime: 0, // 历史页面时间戳
      refreshing: false, // 当前是否刷新
      isShowNav: true, // 是否显示nav
      maxH: 0,
      minH: 0,
      recommendChannels: [], // 推荐频道
      BlackName: -1
    }
  },
  computed: {
    ...mapState(['ChannelNum'])
    // 设置推荐频道，需要去掉我的中已经有的频道
    // recommendChannels () {
    //   const arr = []
    //   this.ChannelsArr.forEach(e => {
    //     let i = 0
    //     this.MyChannels.forEach(e2 => {
    //       if (e.id === e2.id) {
    //         i++
    //       }
    //     })
    //     arr.forEach(e3 => {
    //       if (e.id === e3.id) {
    //         i++
    //       }
    //     })
    //     if (i === 0) {
    //       arr.push(e)
    //     }
    //   })
    //   return arr
    // }
  },
  created () {
    // 当前时间戳 Date.parse(new Date())
    this.getChannles()
    this.getUserChannels()
    this.getAritcles(0, Date.parse(new Date()), 1)
    this.activeChannel = this.ChannelNum
    this.changeChannel(this.ChannelNum)
  },
  mounted () {
    window.addEventListener('scroll', this.handleScrollx, true)
  },
  methods: {
    // vuex方法
    ...mapMutations(['setChannelNum']),
    // 设置推荐频道
    setRecommendChannels () {
      this.recommendChannels = []
      this.ChannelsArr.forEach(e => {
        let i = 0
        this.MyChannels.forEach(e2 => {
          if (e.id === e2.id) {
            i++
          }
        })
        this.recommendChannels.forEach(e3 => {
          if (e.id === e3.id) {
            i++
          }
        })
        if (i === 0) {
          this.recommendChannels.push(e)
        }
      })
    },
    // 拉黑操作
    Blacklists (id) {
      this.BlackName = id
      this.articleArr = []
      // 重新获得文章
      this.getAritcles(
        this.MyChannels[this.activeChannel].id,
        Date.parse(new Date()),
        1
      )
    },
    // 监控滚动高度
    handleScrollx () {
      const hight = window.pageYOffset
      if (hight > this.maxH) {
        this.maxH = hight
        if (this.maxH - this.minH > 200) {
          this.isShowNav = false
        }
      } else {
        this.minH = hight
        if (this.maxH - this.minH < 200) {
          this.isShowNav = true
          this.maxH = this.minH
        }
      }
    },
    // 获得全部频道
    async getChannles () {
      const res = await getChannelsApi()
      this.ChannelsArr = res.data.channels
    },
    // 获得用户频道
    async getUserChannels () {
      this.resetUserChannels = []
      const res = await getUserChannelsApi()
      this.MyChannels = res.data.channels
      await res.data.channels.forEach((e, i) => {
        if (i > 0) {
          this.resetUserChannels.push({ id: e.id, seq: i + 1 })
        }
      })
      this.setRecommendChannels()
    },
    // 变更频道方法
    changeChannel (index) {
      if (index > this.activeChannel) {
        if (index > 2) {
          if (this.$refs.navbar.scrollLeft < 70 + (index - 3) * 110) {
            this.$refs.navbar.scrollLeft = 70 + (index - 3) * 110
          }
        }
      } else {
        if (this.$refs.navbar.scrollLeft > -200 + (index - 3) * 110) {
          this.$refs.navbar.scrollLeft = -200 + (index - 3) * 110
        }
      }
      this.activeChannel = index
      this.setChannelNum(index)
      this.articleArr = []
      this.showNavMenu = false
      this.getAritcles(
        this.MyChannels[this.activeChannel].id,
        Date.parse(new Date()),
        1
      )
    },
    // 展示标签菜单
    showNavMenufn () {
      this.showNavMenu = true
    },
    // 删除tag
    async delChannels (index) {
      if (index > 0 && this.MyChannels.length > 2) {
        this.resetUserChannels.splice(index - 1, 1)
        this.resetUserChannels.forEach(e => {
          e.seq--
        })
        await resetUserChannelsApi(this.resetUserChannels)
        await this.getUserChannels()
      }
    },
    // 添加tag
    async addChannels (item) {
      this.resetUserChannels.push({
        id: item.id,
        seq: this.resetUserChannels.length + 2
      })
      await resetUserChannelsApi(this.resetUserChannels)
      await this.getUserChannels()
    },
    // 上拉加载
    async onLoad () {
      if (this.articleArr.length > 0) {
        await this.getAritcles(
          this.MyChannels[this.activeChannel].id,
          this.articleTime,
          0
        )
      }
      this.loading = false
    },
    // 下拉刷新方法
    async onRefresh () {
      this.articleArr = []
      await this.getAritcles(
        this.MyChannels[this.activeChannel].id,
        Date.parse(new Date()),
        1
      )
      this.refreshing = false
    },
    // 获得文章列表
    async getAritcles (id, timestamp, top) {
      const Query = {
        channel_id: id,
        timestamp,
        with_top: top
      }
      const res = await getArticlesApi(Query)
      res.data.results.forEach(e => {
        this.articleArr.push(e)
      })
      this.articleTime = res.data.pre_timestamp
    }
  }
}
</script>
<style lang="less" scoped>
.index {
  height: 100vh;
  margin-bottom: 50px;
  box-sizing: border-box;
  .topRoom {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10;
    .top {
      .indexTitle {
        position: absolute;
        text-align: center;
        color: white;
        font-size: 20px;
        font-weight: 800;
        top: 10px;
        left: 132px;
      }
      height: 46px;
      background-color: #3296fa;
      padding-top: 7px;
      .search {
        width: 278px;
        height: 32px;
        margin: 0px auto;
        background-color: #5babfb;
        color: white;
        font-size: 16px;
        border-radius: 16px;
        text-align: center;
        span {
          line-height: 32px;
          display: inline-block;
        }
        .iconbox {
          position: relative;
          font-size: 20px;
          display: inline-block;
          margin-right: 5px;
          width: 20px;
          height: 20px;
          i {
            position: absolute;
            left: 0;
            top: 5px;
          }
        }
      }
    }

    .nav {
      background-color: white;
      height: 42px;
      display: flex;
      overflow: scroll;
      position: relative;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      span:nth-child(1) {
        border-left: 1px solid #edeff3;
      }
      span {
        font-size: 14px;
        line-height: 42px;
        border-right: 1px solid #edeff3;
        border-bottom: 1px solid #edeff3;
        flex-shrink: 0;
        display: block;
        width: 100px;
        text-align: center;
        color: #c7c7c7;
      }
      .latsItem {
        width: 40px;
      }
      .active {
        color: black;
      }
      .menu {
        position: fixed;
        top: 50px;
        right: 0px;
        padding-right: 5px;
        width: 40px;
        border-left: 1px solid #edeff3;
        height: 38px;
        font-size: 30px;
        background-image: linear-gradient(
          to right,
          rgba(255, 0, 0, 0),
          rgba(255, 255, 255, 1)
        );
        i {
          display: block;
          margin-top: 5px;
          text-align: right;
        }
      }
    }
  }
  .articleRoom {
    margin-top: 100px;
  }
  .NavMenu {
    padding: 0 12px;
    .priNav {
      background-color: rgb(204, 105, 105);
    }
    span {
      margin: 0 8px 10px 0;
    }
  }
}
</style>
<style lang="less" scoped>
.ani1-enter-active {
  animation: ani1 1s;
}
.ani1-leave-active {
  animation: ani2 1s;
}
@keyframes ani1 {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 40px;
    opacity: 1;
  }
}
@keyframes ani2 {
  0% {
    height: 40px;
    opacity: 1;
  }
  100% {
    height: 0px;
    opacity: 0;
  }
}
.ania-enter-active {
  animation: ania 1s;
}
.ania-leave-active {
  animation: anib 1s;
}
@keyframes ania {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anib {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
